import { useState } from 'react'
import { Link, useNavigate } from "react-router-dom"
import './index.scss'

function Header(props) {
	const [input, setInput] = useState('')

	let navigate = useNavigate()

	// 返回
	const back = () => {
		// 如果是a标签，可以用event.preventDefault()阻止默认行为
		navigate(-1)
	}
	// 跳转搜索页
	const jump = (e) => {
		if(e.keyCode === 13) {
			navigate('/search', { state: { input } })
		}
	}
	// 输入框change事件，更新value
	const change = (e) => {
		setInput(e.target.value)
	}

	return (
		<div>
			<div className="Header" flex="main:justify cross:center">
				<span className="back">
					<Link to="" onClick={back}>
						<font> {'<'} 后退</font>
					</Link>
				</span>
				<span className="search" flex-box="1" flex="cross:center main:center">
					<input type="text" value={input} onChange={change} onKeyDown={jump} />
				</span>
				<span className="right">
					张三丰
				</span>
			</div>
			<div className="block"></div>
		</div>
	);
}

export default Header